<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Dig - Chapter 7</title>
	<link rel="stylesheet" href="/strophe/public/css/jquery-ui-1.8.21.custom.css">
	<link rel="stylesheet" href="/strophe/public/css/dig.css">
	<script type="text/javascript" src="/strophe/public/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/strophe/public/js/jquery-ui-1.8.21.custom.min.js"></script>
	<script type="text/javascript" src="/strophe/public/js/strophe.js"></script>
	<script type="text/javascript" src="/strophe/public/js/flXHR.js"></script>
	<script type="text/javascript" src="/strophe/public/js/strophe.flxhr.js"></script>
	<script type="text/javascript">
		var Dig = {
			connection: null,
			
			onInfo: function(iq, element) {
				// do nothing if the response is not for the selected branch
				if ($('.selected').length > 0 && element != $('.selected')[0]) {
					return;
				}
				
				// list features
				$('#feature-list').empty();
				$(iq).find("feature").each(function() {
					$('#feature-list').append("<li>" + $(this).attr('var') + "</li>");
				});
				
				// list identities
				$('#identity-list').empty();
				$(iq).find("identity").each(function() {
					$('#identity-list').append(
							  "<li><dl>"
							+ "<dt>Name</dt><dd>" + ($(this).attr('name') || "none") + "</dd>"
							+ "<dt>Type</dt><dd>" + ($(this).attr('type') || "none") + "</dd>"
							+ "<dt>Category</dt><dd>" + ($(this).attr('category') || "none") + "</dd>"
							+ "</dl></li>"); 
				});
			},
			
			onItems: function(iq, element) {
				var items = $(iq).find("item");
				if (items.length > 0) {
					$(element).parent().append("<ul></ul>");
					
					var list = $(element).parent().find("ul");
					$(iq).find("item").each(function() {
						
						var node = $(this).attr('node');
						list.append("<li><span class='item'>" + $(this).attr('jid') + (node ? ":" + node : "") + "</span></li>");
					});
				}
			},
			
			log: function(message) {
				$('#log').prepend("<div>" + message + "</div>");
			}
		};
		
		$(document).ready(function() {
			// configure login dialog
			$('#login_dialog').dialog({
				autoOpen: true,
				draggable: false,
				modal: true,
				title: "Connect to XMPP",
				buttons: {
					"Connect": function() {
						$(document).trigger('connect', {
							jid: $('#jid').val(),
							password: $('#password').val()
						});
						
						$('#password').val('');
						$(this).dialog('close');
					}
				}
			});
			
			// click event for Dig button
			$('#dig').click(function() {
				var service = $('#service').val();
				$('#service').val('');
				
				// set up disco info pane
				$('#selected-name').text(service);
				$('#identity-list').empty();
				$('#feature-list').empty();
				
				// clear tree pane
				$('#tree').empty();
				$('#tree').append("<li><span class='item selected'>" + service + "</span></li>");
				
				Dig.connection.sendIQ(
					$iq({to: service, type: "get"}).c("query", {xmlns: "http://jabber.org/protocol/disco#info"}),
					function (iq) {
						Dig.onInfo(iq, $('.selected')[0]);
					}
				);
				
				Dig.connection.sendIQ(
					$iq({to: service, type: "get"}).c("query", {xmlns: "http://jabber.org/protocol/disco#items"}),
					function (iq) {
						Dig.onItems(iq, $('.selected')[0]);
					}
				);
			});
			
			// expand tree and update information pane when item clicked
			$('#tree .item').live('click', function() {
				if ($(this).hasClass("selected")) {
					return;
				}
				
				$(".selected").removeClass("selected");
				$(this).addClass("selected");
				
				var serv_node = $(this).text();
				var service, node;
				var idx = serv_node.indexOf(":");
				if (idx < 0) {
					service = serv_node;
					node = null;
				}
				else {
					service = serv_node.slice(0, idx);
					node = serv_node.slice(idx + 1);
				}
				
				var query_attrs;
				if (node) {
					query_attrs = {node: node};
				}
				else {
					query_attrs = {};
				}
				
				var element = this;
				query_attrs["xmlns"] = "http://jabber.org/protocol/disco#info";
				Dig.connection.sendIQ(
					$iq({to: service, type: "get"}).c("query", query_attrs), 
					function(iq) {
						Dig.onInfo(iq, element);
					}
				);
				
				if ($(".selected").parent().find("ul").length == 0) {
					// list disco items
					query_attrs["xmlns"] = "http://jabber.org/protocol/disco#items";
					Dig.connection.sendIQ(
						$iq({to: service, type: "get"}).c("query", query_attrs),
						function(iq) {
							Dig.onItems(iq, element);
						}
					);
				}
			});
		});
		
		$(document).bind('connect', function(ev, data) {
			var boshUrl = "${config.boshUrl}";
			var conn = new Strophe.Connection(boshUrl);
			
			$('#status').text("Connecting to " + boshUrl);
			
			conn.connect(data.jid, data.password, function(status) {
				if (status == Strophe.Status.CONNECTED) {
					$(document).trigger('connected');
				}
				else if (status == Strophe.Status.DISCONNECTED) {
					$(document).trigger('disconnected');
				}
			});
			
			Dig.connection = conn;
		});
		
		$(document).bind('connected', function() {
			$('#status').text("Connected to XMPP server.");
			
			// enable Dig button
			$('#dig').removeAttr('disabled');
		});
		
		$(document).bind('disconnected', function() {
			$('#status').text("Disconnected from XMPP server.");
		});
	</script>
</head>
<body>
	<h1>Dig</h1>
	
	<div id="top">
		<div id="input-bar">
			<div id="status"></div>
			<input type="text" id="service">
			<input type="button" id="dig" value="Dig!" disabled="disabled">
		</div>
	</div>
		
	<div class="clear"></div>
	
	<div class="left">
		<ul id="tree"></ul>
	</div>
	
	<div class="right">
		<h2 id="selected-name"></h2>
		<div id="disco-info">
			<h3>Identities:</h3>
			<ul id="identity-list"></ul>
			
			<h3>Features:</h3>
			<ul id="feature-list"></ul>			
		</div>
	</div>
	
	<div id="log" class="clear"></div>
	
	<!-- login dialog -->
	<div id="login_dialog" class="hidden">
		<label>JID:</label><input type="text" id="jid" value="sejoonlim@${config.xmppDomain}">
		<label>Password:</label><input type="password" id="password" value="welcome1">
	</div>
</body>
</html>